<template>
  <div ref="container" style="height: 600px; width: 100%;"></div>
</template>

<script setup>
import { PivotSheet, RowCell ,renderText} from '@antv/s2';
import {onMounted, ref} from 'vue'
const container = ref(null);
class CustomRowCell extends RowCell {
  drawTextShape() {
    const { x, y, width, height } = this.getMeta();
    console.log(x,y,width,height,'--------------')
    const {value} = this.getFormattedFieldValue();
    
    const textStyle = this.getTextStyle();
    console.log(textStyle,'text')
    // 设置文本样式
    // const textStyle = {
    //   textAlign: 'justify', // 分散对齐
    //   textBaseline: 'top',
    //   fontSize: 12,
    //   fill: '#000',
    //   wordWrap: true, // 启用换行
    //   wordWrapWidth: width - 10, // 设定宽度限制
    //   lineHeight: 16, // 行高
    // };

    // 调用 renderText 实现分散对齐和换行
    // renderText(this.spreadsheet.container, value, {
    //   x: x + 5, // 左边距
    //   y: y + 5, // 顶部边距
    //   maxWidth: width - 10, // 最大宽度
    //   maxHeight: height - 10, // 最大高度
    //   ...textStyle,
    // });
    const position = this.getTextPosition();
    this.textShape = renderText(
      this,
      [this.textShape],
      position.x,
      position.y,
     // ellipsisText,
      textStyle,
    );
    this.textShapes.push(this.textShape);
  }
}



const customTree = [
  {
    field: "a-2",
    title: "其他投入",
    children: [],
    cellWidth: 100,
    cellHeight: 150,
  },
  {
    field: "a-1-2",
    title: "基础拨款",
    cellWidth: 100,
    cellHeight: 150,
    children: [
      {
        field: "a-1-2",
        title: "基础拨款---子节点",
        cellWidth: 100,
        cellHeight: 100,
      },
    ],
  },
  {
    field: "a-1",
    title: "财政教育经费投入",
    cellWidth: 100,
    cellHeight: 150,
    children: [
      {
        field: "a-1-1",
        title: "项目经费",
        cellWidth: 100,
        cellHeight: 100,
        children: [
          {
            field: "bzhjs",
            title: "标准化建设",
            cellWidth: 100,
            cellHeight: 50,
            children: [],
          },
          {
            field: "xxhjs",
            title: "信息化建设",
            cellWidth: 100,
            cellHeight: 50,
            children: [],
          },
        ],
      },
    ],
    // style: {
    //   fill: { type: "pattern", pattern: "solid", fgColor: { argb: "FF0000" } },
    //   font: { bold: true },
    // },
  },
];

// 定义省市县的自定义树形结构
const rowsTreeHierarchy = [
  {
    field: "beijing",
    title: "北京市",
    writingMode: "ls",
    cellWidth: 100,
    cellHeight: 100,
    description: "北京省描述",
    children: [
      {
        field: "total",
        title: "总计",
        description: "总计描述",
      },
      {
        field: "haidian",
        title: "海淀区",
        description: "海淀区描述",
        children: [
          {
            field: "zizhuyuan",
            title: "紫竹院",
            description: "紫竹院描述",
            children: [],
          },
          {
            field: "zhongguancun",
            title: "中关村",
            description: "中关村描述",
            children: [],
          },
        ],
      },
      {
        field: "chaoyang",
        title: "朝阳区",
        description: "朝阳区描述",
      }
    ],
  },
  {
    field: "shanghai",
    title: "上海市",
    writingMode: "ls",
    description: "上海省描述",
    children: [
      {
        field: "huangpu",
        title: "黄浦区",
        description: "黄浦区描述",
        children: [],
      },
    ],
  },
];

const data = [
  {
    beijing: "北京市",
    haidian: "海淀区",
    zizhuyuan: "紫竹院",
    "a-1": "财政教育经费投入",
    "a-1-1": "项目经费",
    bzhjs: "标准化建设",
    value: 12121,
  },
  {
    beijing: "北京市",
    haidian: "海淀区",
    zizhuyuan: "紫竹院",
    "a-1": "财政教育经费投入",
    "a-1-1": "项目经费",
    xxhjs: "信息化建设",
    value: 322,
  },
  {
    beijing: "北京市",
    haidian: "海淀区",
    zizhuyuan: "紫竹院",
    "a-1": "财政教育经费投入",
    "a-1-2": "基础拨款",
    value: 555,
  },
  {
    beijing: "北京市",
    haidian: "海淀区",
    zhongguancun: "中关村",
    "a-1": "财政教育经费投入",
    "a-1-1": "项目经费",
    bzhjs: "标准化建设",
    value: 12333,
  },
];

const s2DataConfig = {
  fields: {
    rows: rowsTreeHierarchy,
    columns: customTree,
    values: ["value"],
  },
  data,
};

const s2Options = {
  width: 800,
  height: 600,
  // dataCell: (viewMeta, spreadsheet) => {
  //   return new CustomDataCell(viewMeta, spreadsheet);
  // },
  rowCell: (node, spreadsheet, headerConfig) => {
    return new CustomRowCell(node, spreadsheet, headerConfig);
  },
  // colCell: (node, spreadsheet, headerConfig) => {
  //     return new DispersedTextCell(node, spreadsheet, headerConfig)
  // },
  // cornerHeader: (header) => {
  //   return new CustomCornerHeader(header);
  // },
  hierarchyType: "grid",
};

onMounted(()=>{
  const s2 = new PivotSheet(container.value, s2DataConfig, s2Options);
  s2.render();
})


</script>